[beam] add toast notification component #177
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Closed
Alchez
requested changes
Oct 29, 2024
common/changes/@stonecrop/beam/feat-beam-toast-notify_2024-10-28-18-12.json
Show resolved
Hide resolved
examples/beam/default.story.vue
Outdated
Comment on lines
109
to
124
| const toast = useToast() | ||
| const toastType = ref('default') | ||
| const toastTime = ref(3) | ||
| const toastMsg = ref('Toast Message.') | ||
| const toastPosition = ref('top') | ||
|
|
||
| const showNotification = () => { | ||
| let toastOptions = { | ||
| message: toastMsg.value, | ||
| position: toastPosition.value, | ||
| duration: toastTime.value * 1000, | ||
| type: toastType.value, | ||
| } | ||
| // let notification = toast.success("Notified!", toastOptions) | ||
| let notification = toast.open(toastOptions) | ||
| } |
There was a problem hiding this comment.
@crabinak @agritheory Should we create a wrapper around vue-toast-notification so that users can import it from @stonecrop/beam rather than having to remember to use the third-party library? Maybe we package the custom styles into our composable too?
There was a problem hiding this comment.
Okay, so I tried to create a composable wrapper around the dependency but there seems to be an issue with it that I can't locate the source of.
- If I keep the dependency in
examples, then I get errors during the build but toasts still work inside the story so the errors are non-blocking.- Someone already raised an issue last month for the errors I saw but the author isn't interested in maintaining the project anymore.
- If I move the dependency to
beamand try to create a re-usable composable, then the build fails entirely and I'm unable to access any of the Beam stories. I'm not sure what's going on there but this is blocking.
I think we'll have to either:
- look at another dependency
- somehow fix the existing dependency
- or recommend using the library manually in the target app (which kinda defeats the purpose of this PR)
What do you guys think?
Alchez
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
@agritheory I added the toast notifications using vue-toast-notifications. I was able to override styling in the beam style sheet to align the colors with the Beam-defined ones. There are some controls on Histoire that will let you change a few settings in case you want to see it in a different position.
Let me know if this will work.